import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Popconfirm, Divider, Table, Input, Form, Row, Col, message as msg, Button } from 'antd';
import styles from '../Common/TableList.less';

@connect(({ sysUser, loading }) => ({
  query: sysUser.query,
  list: sysUser.list,
  loading: loading.effects['sysUser/fetch'],
}))
class SysUserList extends PureComponent {
  columns = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   render: (text, record, index) => index + 1,
    // },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '真实姓名',
      dataIndex: 'realname',
    },
    {
      title: '手机号',
      dataIndex: 'phoneNo',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (text, record) => (
        <span>
          <a
            onClick={() => {
              this.handleViewRoles(record);
            }}
          >
            查看
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.handleResetPW(record);
            }}
          >
            修改密码
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.handleEdit(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title="确认删除？"
            onConfirm={() => {
              this.handleRemove(record);
            }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/fetch' });
  }

  handleViewRoles = record => {
    const { onViewRoles } = this.props;
    if (onViewRoles) onViewRoles(record);
  };

  handleEdit = record => {
    const { onEdit } = this.props;
    if (onEdit) onEdit(record);
  };

  handleResetPW = record => {
    const { onResetPw } = this.props;
    if (onResetPw) onResetPw(record);
  };

  handleRemove = record => {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/remove', payload: record.userId }).then(({ code, message }) => {
      if (code === 0) {
        msg.success('删除成功');
        dispatch({ type: 'sysUser/fetch' });
      } else {
        msg.error(message);
      }
    });
  };

  handleSearch = query => {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/fetch', payload: { ...query, page: 0 } });
  };

  handleReset = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/reload' });
  };

  handleTableChange = pagination => {
    const { current, pageSize } = pagination;
    const { dispatch } = this.props;
    dispatch({ type: 'sysUser/fetch', payload: { page: current - 1, size: pageSize } });
  };

  renderForm = () => {
    const { query } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={16}>
          <Col md={6}>
            <Form.Item label="用户名">
              <Input
                allowClear
                placeholder="请输入"
                value={query.username}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ username: value });
                }}
              />
            </Form.Item>
          </Col>
          <Col md={6}>
            <Form.Item label="真实姓名">
              <Input
                allowClear
                placeholder="请输入"
                value={query.realname}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ realname: value });
                }}
              />
            </Form.Item>
          </Col>
          <Col md={6}>
            <Form.Item label="手机号">
              <Input
                allowClear
                placeholder="请输入"
                value={query.phoneNo}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ phoneNo: value });
                }}
              />
            </Form.Item>
          </Col>
          <Button style={{ marginLeft: 5 }} onClick={this.handleReset}>
            重置
          </Button>
        </Row>
      </Form>
    );
  };

  render() {
    const { list, loading } = this.props;
    // 选中行
    const onClickRow = (record) => {
      return {
        onClick: () => this.handleViewRoles(record),
      };
    }

    return (
      <div>
        <div className={styles.tableListForm}>{this.renderForm()}</div>
        <Table
          rowKey="userId"
          size="middle"
          columns={this.columns}
          loading={loading}
          dataSource={list.data}
          pagination={list.pagination}
          onChange={this.handleTableChange}
          onRow={onClickRow}
        />
      </div>
    );
  }
}


export default SysUserList;
